<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>
<body>
    <!-- <script>
        function fn(){
            // 此时输出 {name: '之豪', age: 18, fn: ƒ}
            // 但这样修改了obj的结构，不符合预期效果
            console.log(this);
        }
        // fn();
        const obj = {
            name: '之豪',
            age: 18,
            fn:fn
        }
        obj.fn();
    </script> -->
    <!-- <script>
        function fn(){
            console.log(this);
        }
        const obj = {
            name: '之豪',
            age: 18,
            fn:fn
        }
        fn.call(obj);
    </script> -->
    <!-- <script>
        function fn (num1, num2){
            console.log (num1 + num2, this);
            // 3 {name: '之豪'}
        }
        const obj = {
            name: '之豪'
        }
        // 函数有参数的情况就直接将参数2~n传入即可
        fn.call(obj,1,2);
    </script> -->
    <!-- <script>
        const obj = {
            name: '之豪'
        }
        // call的应用
        // 跨类型执行某类型独有的方法,或实现某类型方法的执行效果
        const arr = [1,2,3];
        console.log(arr.toString()); // 1,2,3
        console.log(obj.toString()); // [object Object]
        // 如果数组要实现对象这样的查看类型的效果，可以改变this指向
        console.log(Object.prototype.toString.call(arr));
        // [object Array]
        // ps Object使用方法不能省略prototype
    </script> -->
    <!-- <script>
        function fn(num1,num2){
            console.log(num1 + num2,this);
            // {name: '之豪'}
        }
        const obj = {
            name: '之豪'
        }
        fn.apply(obj, [1,2]);
        fn.call(obj, ...[1,2]);
        const array = [11,2,3,14];
        console.log(Math.max(11,2,3,14)); // 传统用法14
        console.log(Math.max(array)); // 不支持数组，NaN
        console.log(Math.max(...array)); // 展开语法，14
        console.log(Math.max.apply(null,array)); // 填null不改变this指向，14
    </script> -->
    <!-- <button class="btn">换皮</button>
    <script>
        function fn(num1,num2){
            console.log(num1 + num2, this);
            // {name: '之豪'}
        }
        const obj = {
            name: '之豪'
        }
        // 参数传递与call相同
        const newFn = fn.bind(obj, 1, 2);
        fn(1, 2); // 3 Window
        // 执行新函数
        newFn(); // 3 {name: '之豪'}

        // 简单应用，在定时器中改变this指向问题
        const btn = document.querySelector('.btn');
        btn.addEventListener('click',function(e){
            // setTimeout(function(){
            //     // 此时this指向的是Window
            //     this.style.color = 'red'
            // }, 2000);
            // setTimeout(function(){
            //     // 经过bind处理后将this指向了btn
            //     this.style.color = 'red'
            // }.bind(this), 2000);
            setTimeout(function(){
                // 如果仅仅这一个场景的话可以通过event来处理
                e.target.style.color = 'red'
            }, 2000);
            // setTimeout(()=>{
            //     // es6后的箭头函数，无this指向问题
            //     this.style.color = 'red'
            // }, 2000);
        })
    </script> -->
    <script>
        const arrayA = [2, 2, 4, 6];
        const arrayB = [1, 2, 3, 4, 5, 6, 7, 8];
        const callbackFn = (accumulator, currentValue) => {
            if (accumulator[currentValue]) {
                accumulator[currentValue]++;
            } else {
                accumulator[currentValue] = 1;
            }
            return accumulator;
        };
        const objA = arrayA.reduce(callbackFn, {});
        const objB = arrayB.reduce(callbackFn, {});
        const contains = (a, b) => {
            return Object.entries(b).every(([key, value]) => a[key] === value)
        };
        console.log(contains(objA,objB) || contains(objB,objA));
    </script>
</body>
</html>